<template>
  <el-form-item v-if="item.IsEditable && item.Name !== 'ParentId'" :label="item.Label" :prop="item.Name">
    <template v-if="item.ControlType == 1">
      <JSCodeMirror v-model:value="model[item.Name]" />
    </template>
    <el-input-number v-else-if="item.ControlType == 2" v-model="model[item.Name]" class="mx-4" controls-position="right" />
    <el-switch v-else-if="item.TypeName == 'Boolean'" v-model="model[item.Name]" class="mx-4" />
    <el-date-picker v-else-if="item.TypeName == 'DateTime'" v-model="model[item.Name]" type="date"
      :shortcuts="[{ text: 'Today', value: new Date() }]" value-format="YYYY-MM-DD" placeholder="Pick a day" />
    <el-select v-else-if="item.ControlType == 7" @change="selectChange(item)" v-model="model[item.Name]" placeholder="请选择">
      <el-option v-for="(label, value) in item.EnumDic" :label="label" :value="Number(value)" />
    </el-select>
    <el-input v-else v-model="model[item.Name]" autocomplete="off" />
  </el-form-item>
</template>

<script setup lang="ts">
import JSCodeMirror from './JSCodeMirror.vue'
const props = defineProps({
  item: Object,
  model: Object,
  selectChange: Function
});
</script> 